<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS动画效果</title>
        <style>
             a{
                display:block;
                width:50px;
                height:50px;
                position:fixed;
                top:50%;
                left:0;
                border:1px solid #ccc;
                text-decoration: none;
            }

            @keyframes move{
                0%{left:0%;}
                100%{left:50%;}
            }

            @-webkit-keyframes move{
                0%{left:0%;}
                100%{left:50%;}
            }
            div{
                border:1px solid #ccc;width:100px;height:100px; background-color:blueviolet;color:#fff;
                position:absolute;
                animation: move 5s ;
                }
           
            div:hover{width:300px;}

            
        </style>
    </head>
    <body>
        <div id="div1" class="move">
           你点我就膨胀了
        </div>


        <a href="index.html">返回</a>
    </body>
</html>